Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs UI update #3

Merged
merged 12 commits into from
Aug 1, 2024
Merged

Docs UI update #3

merged 12 commits into from
Aug 1, 2024

Conversation

ZYJLiu
Copy link
Contributor

@ZYJLiu ZYJLiu commented Jul 30, 2024

  1. Add Tabs/Tab component
    CleanShot 2024-07-30 at 12 25 18

Example usage on developer-content md files:

<!-- prettier-ignore -->
<Tabs groupId="language" items={['Rust', 'Typescript', 'Java']}>
<Tab value="Rust">Rust 1</Tab>
<Tab value="Typescript">Typescript 1</Tab>
<Tab value="Java">Java</Tab>
</Tabs>

<!-- prettier-ignore -->
<Tabs groupId="language" items={['Rust', 'Typescript', 'Go']}>
<Tab value="Rust">Rust 2</Tab>
<Tab value="Typescript">Typescript 2</Tab>
<Tab value="Go">Go</Tab>
</Tabs>

<!-- prettier-ignore -->
<Tabs groupId="package-managers" items={['pnpm', 'npm', 'yarn']}>
<Tab value="pnpm">pnpm 1</Tab> 
<Tab value="npm">npm 1</Tab>
<Tab value="yarn">yarn 1</Tab> 
</Tabs>

<!-- prettier-ignore -->
<Tabs groupId="package-managers" items={['pnpm', 'npm', 'yarn']}>
<Tab value="pnpm">pnpm 2</Tab> 
<Tab value="npm">npm 2</Tab>
<Tab value="yarn">yarn 2</Tab> 
</Tabs>
  1. Add Accordion/AccordionItem component

CleanShot 2024-07-30 at 12 27 32

Example usage on developer-content md files:

  <Accordion>
  <AccordionItem title="Hello">
  
  ```ts
  console.log("hello");
  ```
  
  </AccordionItem>
  <AccordionItem title="World">
  
  ```rs
  println!("world");
  ```
  
  </AccordionItem>
  </Accordion>
  1. Update docs codeblock UI with svgs icons in header
    CleanShot 2024-07-30 at 12 20 40@2x

  2. Add lightmode color to docs components/codeblock
    CleanShot 2024-07-30 at 12 21 46@2x
    CleanShot 2024-07-30 at 12 28 20@2x
    CleanShot 2024-07-30 at 12 29 56@2x

  3. Update docs scrollbar to only appear on hover
    CleanShot 2024-07-30 at 12 31 06

  4. Fix doc table of content bug where "SOL" gets converted to "SO"

  5. Update Table of Contents "Edit Page" and "Scroll to Top" buttons
    CleanShot 2024-07-31 at 10 20 03

  6. Add Stack Exchange to docs secondary nav
    CleanShot 2024-07-31 at 10 22 19@2x

Copy link

vercel bot commented Jul 30, 2024

@ZYJLiu is attempting to deploy a commit to the Solana Foundation Team on Vercel.

A member of the Team first needs to authorize it.

@ZYJLiu ZYJLiu requested a review from nickfrosty July 30, 2024 17:34
Copy link

vercel bot commented Jul 30, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
solana-next-com ✅ Ready (Inspect) Visit Preview Aug 1, 2024 4:00pm

Copy link
Collaborator

@nickfrosty nickfrosty left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

great work here John! the new components will be a great addition to the site. better UX all around! :)

I just have the one concern about the regex fix for other languages. we need to find a different solution

@@ -353,7 +353,7 @@ export default class ContentApi {

// we remove any special characters from the end of the label
// to make it look cleaner in the UI
label = label.split(/[\v{L|N}]*$/)[0];
label = label.replace(/[^a-zA-Z0-9]+$/, "");
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updating this regex to your suggesest change will break all translated content within the table of contents. and maybe prevent the site from building.

we need to find a different solution to solve the "trailing L" bug we are seeing

@@ -388,7 +388,7 @@ export default class ContentApi {
.trim()
.replace(/\s+/g, "-")
.replace(/\./g, "")
.replace(/[[\v{L|N}]*]+/g, "-")
.replace(/[^a-z0-9]+/g, "-")
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same comment as above

src/components/developers/DevelopersNav/DevelopersNav.jsx Outdated Show resolved Hide resolved
Copy link
Contributor

@mikemaccana mikemaccana left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add the usage guidelines for the new components (you've already added them in the text of this PR) into CONTRIBUTING.md

@ZYJLiu
Copy link
Contributor Author

ZYJLiu commented Aug 1, 2024

Please add the usage guidelines for the new components (you've already added them in the text of this PR) into CONTRIBUTING.md

will add to developer-content, since that is where the components are used

Copy link
Collaborator

@nickfrosty nickfrosty left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work on this John. I think people are going to really like these new UX improvements

@nickfrosty nickfrosty dismissed mikemaccana’s stale review August 1, 2024 16:02

captured and will be accomplished in the dev content repo

@nickfrosty
Copy link
Collaborator

Please add the usage guidelines for the new components (you've already added them in the text of this PR) into CONTRIBUTING.md

added tracking issue on dev content: solana-foundation/developer-content#288

@nickfrosty nickfrosty merged commit e78f45e into solana-foundation:main Aug 1, 2024
3 checks passed
@ZYJLiu ZYJLiu deleted the docs-ui-update branch August 1, 2024 16:29
@@ -353,7 +353,7 @@ export default class ContentApi {

// we remove any special characters from the end of the label
// to make it look cleaner in the UI
label = label.replace(/[^a-zA-Z0-9]+$/, "");
label = label.replace(/[^\p{L}\p{N}]+$/u, "");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

BTW @ZYJLiu you can use \p{Letter} and \p{Number} to make the unicode bits more obvious. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Unicode_character_class_escape

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants